<script setup lang="ts">
import { h, defineProps } from 'vue';
import { useRouter } from 'vue-router';
import { NCard,NButton,NFlex ,NDropdown} from 'naive-ui'
import SvgIcon from '@/components/SvgIcon.vue'

const router = useRouter()
//接收props
const props = defineProps({
  title: {
    type: String,
    default: '应用的名称' // 默认值
  },
  icon: {
    type: String,
    default: 'close' // 默认值
  }
})
/**
 * 头图标名称设置
 * 头标下拉菜单设置
 */
const options_app = [
  { label: '新建数据文件', key: '新建数据文件' },
  { label: '导入csv', key: '导入csv' },
  { label: '导出pdf', key: '导出pdf' },
  
]
const appSelect = (key: string) => {
  console.log(key)
}


let appIcon = () => {
  return  h(NFlex, () => [ h(NDropdown,{trigger:"hover",size:"huge",showArrow:true,options:options_app,onSelect:appSelect},()=> h(NButton,{text:true,style:'font-size: 24px'},()=>h(SvgIcon, { iconClass: props.icon}))),h('div',  props.title )])
}
const header_app = () => appIcon()


/**
 * 关闭事件,返回路由上一页
 */
const handleClose = () => {
  console.log('关闭不了这个应用')
  router.go(-1)
}

</script>

<template>
  <n-card :title="header_app" style="height: 100%;" closable @close="handleClose">
     
    <template #header-extra>
      <slot name="header-extra"></slot>
    </template>
    <template #default>
      
      <slot></slot>
    </template>
  
    <template #footer>
      <slot name="footer"></slot>
    </template>
    <template #action>
      <slot name="action"></slot>
    </template>
  </n-card>
</template>

<style scoped>

</style>
